<template>
	<view class="rectificationContent">
		<view class="upper">
			<commonNavBar title="热门信息" :showSearch="false" :showQuerySearch="false"    >
				<view  slot="right">
					<image src="/static/img/searchImg.png" class="screen" @tap="searchTitle"  />
				</view>
			</commonNavBar>  
		</view>
		 <view class="centre" >
		 	<z-paging ref="paging" autowire-list-name="robotList"  default-page-no="0" style="margin-top: 115rpx;" autowire-query-name="listData"  >
			  <uni-list class="robotList"> 
					<uni-list-item   v-for="(m,index) in robotList" class="list-item"  :showArrow="true" :title="m.msgTitle" :clickable="false"   link="navigateTo"
						 @tap="showInfo(m)"  
					/>   
			  </uni-list>
		    </z-paging>
	    </view>
		<uni-popup ref="businessFormatPopup" type="center">
			<view class="noticeFormPopupContent">
				<view class="title">检索</view> 
				<view class="box">  
					<input type="text" class="input" placeholder="请输入检索内容" v-model="inputValue" />
				</view>
				<view class="button-box">
					<button class="button determine" @tap="startSearch">搜索</button>
					<button class="button cancellation" @tap="closeSearch">关闭</button> 
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import commonNavBar from '@/components/CommonNavBar.vue';
	export default {
		components: { 
			commonNavBar,
		},
		data() {
			return { 
				inputValue:'', 
				robotList:[]
			}
		},
		onLoad(details) {
			const that = this; 
		}, 
		methods: {
			goBack:function(){
				uni.navigateBack();
			},
			async listData(pageNum,pageSize){
				const res = await uni.$api.getHotMessageList({ 
					pageNum: pageNum,
					pageSize: pageSize,
					msgTitle:this.inputValue
				}); 
				this.$refs.paging.complete(res.data.data);
			},
			showInfo(showObj) {  
				uni.navigateTo({
					url:'/pages/robot/hotMessageCaseInfo',
					success: (res) => {
						res.eventChannel.emit('updatePageData',{ caseContent:showObj})
					}
				})
			},
			searchTitle(){
				this.$refs.businessFormatPopup.open();
			},
			startSearch(){
				this.$refs.paging.reload();
				this.$refs.businessFormatPopup.close();
			},
			closeSearch(){
				this.inputValue = '';
				this.$refs.paging.reload();
			}
		}
	}
</script>

<style lang="scss">
.rectificationContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);
		width: 750rpx;
		
		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;

			.title {
				background: url('/static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;

				.arrow {
					position: absolute;
					left: 33rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 100rpx;
					height: 100rpx;
					 
					&::before {
						display: block;
						content: "";
						position: absolute;
						top: 50%;
						left: 0%;
						width: 20rpx;
						height: 20rpx;
						border-left: 1px solid #fff;
						border-top: 1px solid #fff;
						transform: translate(0%, -50%) rotate(-45deg);
					}
				}

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}
			}
		}
}
 
	.centre { 
			padding: 0rpx 17.5rpx 0 17.5rpx;
			height: calc(100vh - 280rpx);
			overflow-x: hidden;
			display: flex;
			flex-direction: column;
			 
	}
	.list-item{
		padding: 15rpx 0rpx;
	}
	.screen {
		width: 35rpx;
		height: 33rpx;
	}
	.noticeFormPopupContent{
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		height: 300rpx;
		border-radius: 14px;
		width: 600rpx; 
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
		
		
		
		.title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: url('/static/img/popupTitle.png') no-repeat center center;
			background-size: cover;
			font-size: 25rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			border-radius: 14px 14px 0px 0px;
			color: #FFFFFF;
			// text-indent: 45rpx;
			text-align: center;
		}
		
		.box { 
			padding: 45rpx 30rpx;
			height: 400px; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			 
				.input {
					font-size: 21rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400; 
					width: 460rpx;
					height: 60rpx;
					text-indent: 20rpx;
				}
		}
		
		
		.button-box {
			margin: 20rpx auto 0; 
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
		
			.button {
				width: 169rpx;
				height: 55rpx;
				line-height: 55rpx;
				background: #0552A9;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
		
				&.determine {
					color: #fff;
				}
		
				&.cancellation {
					background: none;
					border: 1rpx solid #979797;
					color: #979797;
				}
			}
		}
	}
</style>
